/**
 * 获取 commonOption
 * @param {number[]} x x轴数据
 * @param {number} increment 纵轴增量，图表2专用，将负数转为正数的增量，纵轴数据需要减掉该增量
 */
const getCommonOption = (x, increment = 0) => {
  const xs = x.map(i => i + 'h');
  return {
    xAxis: {
      type: 'category',
      splitLine: {show: false},
      // 横坐标名称
      name: '',
      // 横坐标默认值，需要后续动态修改
      data: xs,
    },
    yAxis: {
      type: 'value',
      // 纵坐标名称
      name: '',
      nameGap: 40,
      show: true,
      nameLocation: "middle",
      axisLabel: {
        formatter: v => (v - increment).toString()
      },
    },
    grid: {
      left: '50',
      right: '50',
      bottom: '20',
      top: '50',
      containLabel: true,
    },
  }
};

function formatDiffData(data) {
  const {diff, upper, lower} = data;
  // 将数据处理成一长一短两根柱子
  for (let i = 0; i < diff.length; ++i) {
    if (diff[i] == null) {
      lower[i] = null;
      upper[i] = null;
      continue;
    }
    upper[i] = diff[i] + upper[i];
    lower[i] = diff[i] - lower[i];
  }
  // 如果存在负数的话，柱状图画出来会出现问题，所以需要转换成正数
  const min = Math.min(...(lower.filter(i => i !== null)));
  if (min < 0) {
    const increment = Math.ceil(Math.abs(min));
    for (let i = 0; i < diff.length; ++i) {
      if (diff[i] == null) continue;
      diff[i]  += increment;
      upper[i] += increment;
      lower[i] += increment;
    }
    data.increment = increment;
  } else {
    data.increment = 0;
  }
}

/**
 * 生成第二张图表数据
 * @param {Object} data
 * @param {number[]} data.x x轴数据
 * @param {number[]} data.diff y轴数据
 * @param {number[]} data.upper 置信上限
 * @param {number[]} data.lower 置信下限
 */
function getSeries2(data) {
  const color = '#37A2DA';
  let {diff, upper, lower} = data;
  // 克隆数组，避免影响原数据
  upper = upper.concat();
  for (let i = 0; i < upper.length; ++i) {
    upper[i] -= lower[i];
  }

  return [
    {
      name: 'lower',
      type: 'bar',
      stack: 'stack',
      barGap: '-100%',
      itemStyle: {
        barBorderColor: 'rgba(0,0,0,0)',
        color: 'rgba(0,0,0,0)'
      },
      data: lower,
    },
    {
      name: 'upper',
      type: 'bar',
      stack: 'stack',
      barGap: '-100%',
      barWidth: 4,
      label: {
        position: 'top'
      },
      itemStyle: {
        color
      },
      data: upper,
    },
    {
      name,
      type: 'line',
      itemStyle: {
        color
      },
      data: diff,
    }];
}

/**
 * 生成图表1的配置
 * @param {string} title 图表1标题
 * @param {Object} data 图表2数据
 * @param {number[]} data.x 图表2 x轴数据
 */
export function getOption1(title, data){
  const common = getCommonOption(data.x);
  delete data.x;
  const modes = Object.keys(data); // 正常情况下会返回2个mode
  const mode1 = modes[0];
  const mode2 = modes[1];
  const data1 = data[mode1];
  const data2 = data[mode2];
  return {
    ...common,
    title: {
      // 图表1的标题
      text: title,
      left: "center",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      formatter: function (params) {
        let result = [];
        for (let param of params) {
          result.push(`${param.seriesName}: ${param.value}`)
        }
        return result.join('<br/>');
      }
    },
    legend: {
      // 图表1两条线的图例
      data: [mode1, mode2],
      orient: 'vertical',
      right: 10,
      top: 10,
    },
    series: [
      {
        // 图表1中第一条线的名称
        name: mode1,
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#37A2DA',
        },
        // 图表1中第一条线的数据
        data: data1,
      },
      {
        // 图表1中第二条线的名称
        name: mode2,
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#E4B2D8',
        },
        // 图表1中第二条线的数据
        data: data2,
      },
    ],
  };
}

/**
 * 生成图表2的配置
 * @param {Object} data
 * @param {number[]} data.x x轴数据
 * @param {number[]} data.diff y轴数据
 * @param {number[]} data.upper 置信上限
 * @param {number[]} data.lower 置信下限
 * @param {number} data.increment 纵轴增量，这个是 formatDiffData(data) 后增加的，原始没有传入
 */
export function getOption2(data) {
  formatDiffData(data);
  const common = getCommonOption(data.x, data.increment);
  const series = getSeries2(data);
  console.log(series);
  return {
    ...common,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      formatter: function (params) {
        const increment = data.increment;
        if (params[0].data == null || params[1].data == null || params[2] == null) {
          return `${name}: undefined`;
        }
        let lower = params[0].data - increment;
        let upper = params[1].data + params[0].data - increment;
        let diff = (params[2].data - increment).toFixed(2);
        upper = (upper - diff).toFixed(2);
        lower = (diff - lower).toFixed(2);
        return `diff: ${diff} upper: ${upper} / lower: ${lower}`;
      },
    },
    series,
  }
}


